.wrapper {
  height: 400px;
  flex-grow: 1;

  &.vertical:not(&.singlePanel, &.fullHeight) {
    height: 600px;
  }
}

.hiddenPanel {
  display: none;
}

.resizeHandle {
  --handle-width: 8px;
  --handle-inset: calc(var(--handle-width) / 4);

  height: 100%;
  width: var(--handle-width);
  position: relative;

  &::after {
    content: '';
    position: absolute;
    inset: 0 var(--handle-inset);
    transition: background-color 0.1s ease-out;
  }

  &[data-panel-group-direction='vertical'] {
    width: 100%;
    height: var(--handle-width);

    &::after {
      inset: var(--handle-inset) 0;
    }
  }

  &[data-resize-handle-state='hover']::after,
  &[data-resize-handle-state='drag']::after {
    background-color: #007fd4;
  }
}
